<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 抄表管理  </title>

    <!--
        导入 js 和 element
    -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">

    <style>

        .el-row > .el-button {
            margin-bottom: 15px;
        }

    </style>
</head>
<body>

<div id="app">

    <el-input
            placeholder="电话:"
            prefix-icon="el-icon-search"
            v-model="tel"
            style="width: 32%;margin-bottom: 15px"
    >
    </el-input>
    <el-input
            placeholder="身份证号:"
            prefix-icon="el-icon-search"
            v-model="identity"
            style="width: 32%;margin-bottom: 15px"
    >

    </el-input>

    <el-button @click="search" type="success"> 搜索</el-button>

        <el-row>
            <el-button @click="addOwner" type="primary"> 添加</el-button>
            <el-button type="danger"> 多个删除</el-button>
        </el-row>

        <el-table
                ref="arr"
                :data="records"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="house.numbers"
                    label="门牌号"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="house.owner.username"
                    label="户主"
                    width="120">
            </el-table-column>

            <!--        propertyType 类型 下面的 name         -->
            <el-table-column
                    prop="propertyType.name"
                    label="费用类"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="num"
                    label="上次度数"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="num2"
                    label="本次度数"
            >
            </el-table-column>

            <el-table-column
                    prop="checkTime"
                    label="登记时间"
            >
            </el-table-column>

            <el-table-column
                    prop="meter"
                    label="登记员"
            >
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                <template slot-scope="scope">
                    <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>


        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--
             添加前端实现步骤:
             01    点击  <el-button @click="addOwner" type="primary"> 添加</el-button>
                   弹窗操作:      弹窗的dialog展示 this.addDialogVisible = true;

            02      页面的布局
                  表单中,添加组件:
                  房子编号:  需要的是 select标签 进行选择    (查询 house 这个表格)
                                //查询房屋信息
                                this.findHouse();

                  费用类型:  需要的是 select标签 进行选择    (查询 propertype 这个表格)
                                  //查询类型信息
                                  this.findProperType();
                  数据值 需要自己填
                  抄表时间:   <el-date-picker>    选择时间要注意格式

            03 添加
                       record 对象:
                       record.houseId   房子的id
                       record.typeId    费用类型的id
                       record.num2      本次的费用
                       record.checkTime  抄表时间

            04 axios 发送数据 record 发送到服务器

        -->
        <el-dialog
                title="信息抄表"
                :visible.sync="addDialogVisible"
                width="45%"
                @close="handlerClose">

            <el-form ref="record" :model="record" label-width="80px">

                <!--  houses -->
                <el-form-item label="房子编号:">

                    <el-select v-model="record.houseId" placeholder="请选择房子">
                        <!--
                            label  文本显示
                            value  提交的值
                        -->
                        <el-option
                                v-for="house in houses"
                                :key="house.id"
                                :label="house.numbers"
                                :value="house.id">
                        </el-option>

                    </el-select>

                </el-form-item>

                <el-form-item label="费用类型:">
                    <el-select v-model="record.typeId" placeholder="选择费用类型">
                        <!--
                            label  文本显示
                            value  提交的值
                        -->
                        <el-option
                                v-for="type in properTypes"
                                :key="type.id"
                                :label="type.name"
                                :value="type.id">
                        </el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="数据值:">
                    <el-input v-model="record.num2"></el-input>
                </el-form-item>

                <el-form-item label="抄表时间">
                    <el-col :span="11">
                        <!--
                            value-format  提交的时候的数据格式
                        -->
                        <el-date-picker type="date" placeholder="选择日期" v-model="record.checkTime"
                                        value-format="yyyy-MM-dd"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>

                <el-form-item label="备注信息">
                    <el-input type="textarea" v-model="record.remarks"></el-input>
                </el-form-item>

            </el-form>

            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addRecordData"> 添加抄表</el-button>

        </el-dialog>

</div>

<script>

    let app = new Vue({
        el: "#app",
        data: {
            tel: "",
            identity: "",

            //查询的记录
            records: [],
            arr: [],

            //分页数据
            currentPage: 1,
            pageSizes: [2, 3, 4],
            pageSize: 2,
            total: 0,

            // 添加的dialog 操作

            addDialogVisible: false,
            editDialogVisible:false,
            record: {

            },
            updateOwner:{},
            // 房屋数据
            houses: [],
            properTypes:[]
        },
        methods: {

            handlerUpdateClose(){
                this.updateOwner = {};
            },
            handlerClose() {
                // alert("我dialog关闭了..");
                this.record = {};
            },
            // 添加抄表数据
            addRecordData() {
                axios({
                    method: "POST",
                    url: "http://localhost:8080/records",
                    data: this.record
                }).then(resp => {
                    // 01 信息提示
                    if (resp.data.code == 100000) {
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        // 02 数据刷新
                        this.findReocords(this.currentPage, this.pageSize);

                        // 03 关闭dialog
                        this.addDialogVisible = false;
                    }
                })
            },
            addOwner() {
                this.addDialogVisible = true;
            },
            //条件搜索
            search() {
            },
            // 改变的 size
            handleSizeChange(val) {
                this.pageSize = val;
                this.findReocords(this.currentPage, this.pageSize);
            },

            //触发改变的currentPage
            handleCurrentChange(val) {
                this.currentPage = val;
                this.findReocords(this.currentPage, this.pageSize);
            },
            // 勾选后 会触发函数
            // val 是勾选的数组
            handleSelectionChange(val) {
                this.arr = val;
            },
            findReocords(currentPage, pageSize) {
                axios({
                    method: "GET",
                    url: "http://localhost:8080/records",
                    params: {
                        currentPage: currentPage,
                        pageSize: pageSize,
                    }
                }).then(resp => {
                     this.records = resp.data.data.data;
                     this.total = resp.data.data.total;

                })
            },
            findHouse() {
                axios({
                    method: "GET",
                    url: "http://localhost:8080/house/all",
                }).then(resp => {
                    this.houses = resp.data.data;
                })
            },
            // 查询费用类型
            findProperType() {
                axios({
                    method: "GET",
                    url: "http://localhost:8080/propertyType/all",
                }).then(resp => {
                    this.properTypes = resp.data.data;
                })
            }
        },
        created() {
            //查询记录
            this.findReocords(1, 2) ;

            //查询房屋信息
            this.findHouse();
            //查询类型信息
            this.findProperType();

        }
    });
</script>

</body>
</html>